<template>
  <div class="routeConfig">
    <el-row :gutter="30">
      <el-col :span="4">
        <div class="layoutLeft">
          <div class="mainConfig">
            <el-button @click="globalConfig">全局设置</el-button>
          </div>
          <div class="layoutTree">
            <el-tree 
              :data="treeData" 
              :props="defaultProps" 
              @node-click="handleNodeClick"
              default-expand-all
              :expand-on-click-node="false"
              node-key="id"
            />
          </div>
        </div>
      </el-col>
      <el-col :span="19">
        <h2>{{ title }}</h2>
        <el-divider />
        <el-form label-width="120px">
          <el-row>
            <el-col :span="12" v-for="item in fromArr" :key="item.id" >
              <el-row :gutter="10">
                <el-col :span="16">
                  <el-form-item :label="item.label" label-width="200">
                    <el-input v-model.number="item[item.dictValue]" v-if="item.descr.type !== 'select'"/>
                    <el-select  v-model="item[item.dictValue]" v-else>
                      <el-option v-for="item in item.option" :label="item.dictLabel" :value="item.dictValue" :key="item.value"/>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="状态" label-width="60">
                    <el-switch
                      v-model="item.status"
                      style="--el-switch-on-color: #13ce66;"
                      :active-value="0"
                      :inactive-value="1"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :offset="18" style="margin-top: 50px;">
              <el-button @click="globalConfig">恢复全局配置</el-button>
              <el-button type="primary" @click="saveConfig">保存</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { getDicts } from '@/api/system/dict/data'
import { getRouteConfig, updateRouteConfig } from '@/api/dispatch/routeConfig.js'
import { getDeptTree } from '@/api/basic/dept.js'
import {  ElMessage } from 'element-plus'
const fromData = ref([])
const fromArr = ref([])
const treeData = ref([])
const defaultProps = {
  children: 'children',
  label: 'name',
}

const getRouteConfigDetail = async (routeId)=>{
  const routeConfigDetail = await getRouteConfig(routeId)
  fromArr.value.forEach(ele => {
    routeConfigDetail.data.forEach((item)=>{
      if(item.configKey == ele.dictValue){
        ele[ele.dictValue] = item.configValue
      }
    });
  })
}

const initData = async ()=>{
  let Obj = {}
  const { data } = await getDicts('dispatch_route_config_items')
  data.forEach(async(item) => {
    let descr = JSON.parse(item.remark)
    let option = []

    if(descr.type == 'select'){
      const res = await getDicts(descr.dic)
      option = res.data
    }
    fromData.value.push({
      ...item,
      status:0,
      descr,
      option
    })
  });
  const treeRes = await getDeptTree()
  if(treeRes.code !== 200) return
  treeData.value = treeRes.data
  data.forEach((item) => {
    Obj[item.dictValue] = null
    Obj.label = item.dictLabel
    fromData.value.forEach(ele => {
      if(item.dictValue == ele.dictValue){
        fromArr.value.push({
          ...Obj,
          ...ele
        })
      }
    });
  });
  getRouteConfigDetail(0)
}
initData()

const title = ref('全局配置')
const routeId = ref(0)
const globalConfig = () =>{
  title.value = '全局配置'
  routeId.value = 0
  getRouteConfigDetail(0)
}

const handleNodeClick = (nodeData) => {
  if(nodeData.type !== 'route') return
  title.value = '线路配置'
  routeId.value = nodeData.id
  getRouteConfigDetail(nodeData.id)
}

const saveConfig = async ()=>{
  const requestData = []
  fromArr.value.forEach(item => {
    requestData.push({
      routeId:routeId.value,
      configKey:item.dictValue,
      configValue:item[item.dictValue],
      status:item.status
    })
  });
  const res =  await updateRouteConfig(requestData)
  if(res.code == 200){
    ElMessage.success('保存成功')
  }
}
</script>

<style scoped lang="scss">
.routeConfig{
  padding: 20px;
}
.layoutTree , .mainConfig {
  padding-right: 10px;
  width: 100%;
  .el-button{
    width: 100%;
  }
}
.layoutTree{
  max-height: 750px;
  overflow-y: auto;
}
:deep(.el-tree-node__content){
  height: 35px;
}
:deep(.el-input) {
  max-width: 214px;
}
</style>